<template>
  <div class="device-group">
    <el-card style="min-height: 600px">
      <div slot="header" class="flex jc-sb pl-30">
        <span>群组列表</span>
        <span class="base cursor" @click="handleAdd">新增</span>
      </div>

      <!-- 搜索 -->
      <el-row class="mb-20">
        <el-input @change="seach" clearable v-model="keyword" style="width: 200px;" placeholder="请输入群组名称"></el-input> 
        <el-button type="primary" class="ml-10">搜索</el-button>
      </el-row>

      <!-- 列表 -->
      <el-table border stripe :data="groupList" style="width: 100%">
        <el-table-column align="center" prop="groupName" label="名称">
        </el-table-column>
        <el-table-column :formatter="formatTime" align="center" prop="cTime" label="创建时间">
        </el-table-column>
        <el-table-column align="center" :formatter="formatTime" prop="uTime" label="更新时间">
        </el-table-column>
        <el-table-column align="center" prop="devNums" label="设备数量">
        </el-table-column>
        <el-table-column align="center" prop="onlineNums" label="在线数量">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >重命名</el-button
            >
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="flex jc-c mt-20">
        <el-pagination
          background
          layout="prev, pager, next"
          hide-on-single-page
          :total="total"
          :page-size="pageSize"
          :current-page="currPage"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增弹窗 -->
    <el-dialog title="新增群组" :visible.sync="show" width="30%" center>
      <el-input v-model="form.groupName" placeholder="请输入群组名称" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {$groupList} from '../../api/index';
import * as api from "../../api/index";

export default {
  data() {
    return {
      keyword: '', // 搜索关键字
      currPage: 1, // 当前页
      pageSize: 5, // 每页条数
      total: 0, // 总条数
      form: {
        groupName: "",
      },
      currIndex: -1, // 当前修改的对象下标
      editing: false, // 是否在编辑中
      show: false, // 显示弹窗
      groupList: [
        {
          id: "440000198307238477",
          groupName: "aaaadasdasddd",
          uTime: 1647443486532,
          nodeNums: 0,
          groupNums: 10,
          devNums: 1,
          onlineNums: 0,
          cTime: 1590605624000,
        },
      ],
    };
  },

  created() {
    this.getGroupList();
  },

  methods: {
    // 搜索
    seach() {
      // 默认展示第一页搜索结果
      this.currPage = 1;
      this.getGroupList();
    },

    // 获取群组列表
    getGroupList() {
      let data = {
        currPage: this.currPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      } 
      api.$groupList(data).then((res) => {
        this.groupList = res.data;
        this.total = res.total;
      });
    },
    // 新增
    onSubmit() {
      if (this.editing) {
        // 发送编辑请求
        let data = {
          id: this.form.id,
          groupName: this.form.groupName,
        };
        api.$groupEdit(data).then((res) => {
          // 请求成功后, 修改页面上的数据
          // this.groupList.splice(this.currIndex,1,this.form); // 整个对象替换
          this.groupList[this.currIndex].groupName = this.form.groupName; // 只修改名称
          this.groupList[this.currIndex].uTime = res.data.uTime; // 更新时间
        });
      } else {
        // 发送新增请求
        let data = {
          groupName: this.form.groupName,
        };
        api.$groupAdd(data).then((res) => {
          // 把数据插入到列表前面
          this.groupList.unshift(res.data);
        });
      }
      this.show = false;
    },

    // 新增(显示弹窗)
    handleAdd() {
      this.show = true;
      this.form = {};
      this.editing = false;
    },
    // 编辑
    handleEdit(index, row) {
      // 显示弹窗
      this.show = true;
      // 把当前数据(row)赋给表单对象(this.form)
      this.form = { ...row };
      this.editing = true;
      // 把修改的对象下标存起来
      this.currIndex = index;
    },
    // 删除
    handleDelete(index, row) {
      let data = {
        id: row.id,
      };
      // 弹窗确认
      this.$confirm("确认删除？")
        .then((_) => {
          api.$groupDel(data).then((res) => {
            // 删除数组里对应的数据
            this.groupList.splice(index, 1);
          });
        })
        .catch((_) => {});
    },
    // 分页数据
    changePage(page) {
      this.currPage = page;
      this.getGroupList();
    }
  },
};
</script>